<template>
    <div id="risk-management-control" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box; padding: 6px;">
            <div style="box-sizing: border-box;">
                <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                    <el-form class="box-f" ref="queryForm" :inline="true">
                        <el-form-item label="选择搜索方式：">
                            <el-select 
                                v-model="searchVal" 
                                filterable 
                                class="m-2" 
                                placeholder="请选择搜索方式" 
                                @change="searchChange"
                                popper-class="set-select"
                                :popper-append-to-body="false"
                            >
                                <el-option
                                    v-for="item in searchOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <template v-if="searchVal === '1'">
                                <el-select 
                                    filterable 
                                    v-model="planVal" 
                                    placeholder="请选择培训计划" 
                                    value-key='id'
                                    @change="planChange"
                                >
                                    <el-option
                                        v-for="item in planOption"
                                        :key="item.id"
                                        :label="item.v_CourseName"
                                        :value="item.id"
                                    />
                                </el-select>
                            </template>
                            
                            <template v-else-if="searchVal === '2'">
                                <el-select 
                                    v-model="transferVal" 
                                    filterable 
                                    class="m-2" 
                                    placeholder="请选择考题类型" 
                                    @change="acquireChange"
                                    value-key="id"
                                    popper-class="set-select"
                                    :popper-append-to-body="false"
                                >
                                    <el-option
                                        v-for="item in responsiblePle"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </template>
                        </el-form-item>
                        <el-form-item >
                            <el-button @click='searchClick' icon="ele-Search" type="primary"> 查询 </el-button>
                            <el-button  @click="resetClick" icon="ele-Refresh"> 重置 </el-button>
                            <el-button @click="nodeClick('','add')" icon="ele-Plus" type="primary"> 新增 </el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </div>

            <div style="box-sizing: border-box;" class="flex-1 pos-r">
                <div class="pos-a w-h-100" style="box-sizing: border-box;">
                    <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                        <div style="" class="w-h-100 ver-flex">
                            <div class="flex-1 pos-r">
                                <div class="pos-a w-h-100">
                                    <el-table :data="list" class="w-h-100" style="width: 100%" border v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)">

                                        <el-table-column type="index" label="序号" width="55" :show-overflow-tooltip="true" align="center" :index="indexMethod" />

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_Name" label="分区名称"  align="center" />

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_Type" label="分区类型"  align="center" />

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="所属空间位置名称"  align="center">
                                            <template #default="scope">
                                                <span v-if="scope.row.v_SpatialLocationName">{{ scope.row.v_SpatialLocationName }}</span>
                                                <span v-else>-</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="分区图绘制状态"  align="center">
                                            <template #default="scope">
                                                <span style="color: #F56C6C;" v-if="scope.row.n_AreaChartState === 0">{{ scope.row.v_AreaChartStateName }}</span>
                                                <span style="color: #67C23A;" v-else>{{ scope.row.v_AreaChartStateName }}</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" prop="v_ResponsibleDepName" label="责任部门"  align="center" />

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="报警类型-闯入"  align="center">
                                            <template #default="scope">
                                                <span style="color: #67C23A;" v-if="scope.row.isAlarmIntrude">是</span>
                                                <span style="color: #E6A23C;" v-else>否</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="报警类型-超员"  align="center">
                                            <template #default="scope">
                                                <span style="color: #67C23A;" v-if="scope.row.isAlarmOverman">是</span>
                                                <span style="color: #E6A23C;" v-else>否</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="报警类型-串岗"  align="center">
                                            <template #default="scope">
                                                <span style="color: #67C23A;" v-if="scope.row.isAlarmSerialPosts">是</span>
                                                <span style="color: #E6A23C;" v-else>否</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="报警类型-静止"  align="center">
                                            <template #default="scope">
                                                <span style="color: #67C23A;" v-if="scope.row.isAlarmStill">是</span>
                                                <span style="color: #E6A23C;" v-else>否</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="风险等级"  align="center">
                                            <template #default="scope">
                                                <span style="color: #67C23A;" v-if="scope.row.n_RiskLevel === 0">{{ scope.row.v_RiskLevelName }}</span>
                                                <span style="color: #E6A23C;" v-if="scope.row.n_RiskLevel === 1">{{ scope.row.v_RiskLevelName }}</span>
                                                <span style="color: #CE7C01;" v-if="scope.row.n_RiskLevel === 2">{{ scope.row.v_RiskLevelName }}</span>
                                                <span style="color: #FC5400;" v-if="scope.row.n_RiskLevel === 3">{{ scope.row.v_RiskLevelName }}</span>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="查看分区部门"  align="center">
                                            <template #default="scope">
                                                <el-popover placement="bottom" :width="200" trigger="click">
                                                    <template #reference>
                                                        <el-button @click="viewClick(scope.row,1)" class="icon-e" icon="ele-View" size="small" text type="warning">查看</el-button>
                                                    </template>
                                                    <ul>
                                                        <el-input v-model="filterSearch" placeholder="回车键搜索" :suffix-icon="Search" @input="handleInputChange" @keyup.enter="handleEnter" size="small" />
                                                        <li v-if="listData.length !== 0" v-for="item in listData" :key="item.id">{{ item.v_DeptName }}</li>
                                                        <span v-else style="color: #8D9095;display: block;width: 100%;padding: 10px 0;text-align: center;">暂无数据</span>
                                                    </ul>
                                                </el-popover>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="160" :show-overflow-tooltip="true" label="查看分区人员"  align="center">
                                            <template #default="scope">
                                                <el-popover placement="bottom" :width="200" trigger="click">
                                                    <template #reference>
                                                        <el-button @click="viewClick(scope.row,2)" class="icon-e" icon="ele-View" size="small" text type="warning">查看</el-button>
                                                    </template>
                                                    <ul>
                                                        <el-input v-model="filterSearch" placeholder="回车键搜索" :suffix-icon="Search" @input="handleInputChange" @keyup.enter="handleEnter" size="small" />
                                                        <li v-if="listData.length !== 0" v-for="item in listData" :key="item.id">{{ item.v_DeptName }}</li>
                                                        <span v-else style="color: #8D9095;display: block;width: 100%;padding: 10px 0;text-align: center;">暂无数据</span>
                                                    </ul>
                                                </el-popover>
                                            </template>
                                        </el-table-column>

                                        <el-table-column min-width="450" label="操作" align="center" fixed="right">
                                            <template #default="scope">
                                                <div class="operate-s">
                                                    <el-button @click="nodeClick(scope.row,'edit')" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                    <el-button @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                    <el-button @click="documentClick(scope.row,1)" class="icon-e" icon="ele-Discount" size="small" text type="warning">选择分区部门</el-button>
                                                    <el-button @click="documentClick(scope.row,2)" class="icon-e" icon="ele-UserFilled" size="small" text type="success">选择分区人员</el-button>
                                                    <el-button @click="drawHandle(scope.row, 1)" v-if="scope.row.n_AreaChartState === 0" class="icon-e" icon="ele-DataLine" size="small" text type="primary">绘制区域</el-button>
                                                    <el-button @click="drawHandle(scope.row, 2)" v-if="scope.row.n_AreaChartState === 1" class="icon-e" icon="ele-DataLine" size="small" text type="primary">查看/编辑区域</el-button>
                                                </div>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </div>
                            </div>
                            <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
								<el-pagination
									v-model:currentPage="pageNo"
									v-model:page-size="pageSize"
									:total="totalRows"
									:page-sizes="[10, 20, 50, 100]"
									small
									background
									@size-change="handleSizeChange"
									@current-change="handleCurrentChange"
									layout="total, sizes, prev, pager, next, jumper"
									class="w-h-100"
								/>
							</div>
                        </div>
                    </el-card>
                </div>
            </div>
        </div>
        <AddEditRiskZoning
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @updateData="getData"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
        <ChoiceFun
            :repairInfo="repairFunInfo"
            :isUseDialog="isFunDialog"
            @updateData="getData"
            @cancelFunClick="cancelFunClick"
            @controlFunClick="controlFunClick"
        />
        <DrawArea 
            :isUseDialog="drawVisible" 
            :drawInfo="drawInfo"
            @updateData='getData'
            @cancelDrawClick="cancelDrawClick"
            @controlDrawClick="controlDrawClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw } from 'vue';
import getTableData from '/@/utils/getTableData';
import { SMSDCRiskPartitionPage , SMSDCRiskPartitionDelete , SMSDCRiskPartitionDeptList , SMSDCRiskPartitionUserList } from '/@/api/centerControl/sms';
import AddEditRiskZoning from '../component/sms/add-edit-RiskZoning.vue';
import ChoiceFun from '../component/sms/choice-fun.vue';
import { ElMessageBox , ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import DrawArea from '../component/drawArea.vue';

export default defineComponent( {
    name: 'RiskManagementControl',
    components: {
        AddEditRiskZoning,
        ChoiceFun,
        DrawArea,
    },
    setup(props){
        const isUseDialog = ref() // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref() // 传递子组件数据
        const searchVal = ref('1')
        const transferVal = ref() // 需要查询的值
        const projectNam = ref() // 友商名称数据
        let searchName = '1'
        let searchObj:any = reactive({})
        const aModel:Ref = ref(null)
        const planOption = ref();
        const planVal = ref();
        let defaultId = '';
        let defaultVal = '';
        const isFunDialog = ref(false);
        const repairFunInfo = ref();
        const listData:any = ref([]);
        const filterSearch = ref();
        let originalInfo = '';
        const drawVisible = ref(false);
        const drawInfo = ref();

        /*** resetFun */
        const resetFun = () => {
            let newObj = Object.keys(searchObj)
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                })
            }
        };

        /*** 搜索类型选择事件 searchChange */
        const searchChange = (val:any) => {
            searchName = val;
            if(val === '1'){
                transferVal.value = defaultId;
                searchObj.L_TrainingPlanId = defaultId;
                planVal.value = defaultVal;
            }else {
                transferVal.value = '';
            }
        };

        /*** acquireChange 搜索下拉框选择的数据 ---- 传给接口数据 */
        const acquireChange = (val:any) => {
            transferVal.value = val;
        };

        /*** planChange 培训计划下拉框选择数据 */
        const planChange = (val:any) => {
            transferVal.value = val
        };

        /*** searchClick 查询按钮 */
        const searchClick = () => {
            if(searchName === '1'){ searchObj.L_TrainingPlanId = transferVal.value }
            if(searchName === '2'){ searchObj.N_Type = transferVal.value }
        };

        /*** resetClick 重置按钮 */
        const resetClick = () => {
            resetFun();
            searchVal.value = '1';
            transferVal.value = defaultId;
            searchObj.L_TrainingPlanId = defaultId;
            planVal.value = defaultVal;
        };

        /*** nodeClick 新增/编辑点击事件 */
        const nodeClick = (val:string | object , am:string) => {
            val !== '' ? repairInfo.value = JSON.stringify(toRaw(val)) : repairInfo.value = ''
            isUseDialog.value = true
        };

        /*** deleteHandle 删除数据事件 */
        const deleteHandle = async (val: String | Number, updateFun: Function) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                return
                try {
                    let res:any = await SMSDCRiskPartitionDelete(param);
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        };

        /*** handleEnter 回车键进行搜索 */
        const handleEnter = () => {
            let filteredArr = listData.value.filter((item: any) => item.v_DeptName === filterSearch.value);
            listData.value = filteredArr;
        }

        /*** handleInputChange 监听搜索框改变事件 */
        const handleInputChange = (val: any) => {
            if(val === '') listData.value = JSON.parse(originalInfo);
        }

        /*** viewClick 查看部门/人员数据 */
        const viewClick = (val:any, num: number) => {
            listData.value = [];
            filterSearch.value = '';
            originalInfo = '';
            getListFun(val,num);
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false
        };

        /*** controlUseClick 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false
        };

        /*** getListFun 获取部门/人员列表 */
        const getListFun = async(val: any, num: number) => {
            let param: any = {};
            param.l_RiskPartitionId = val.id;
            let res:any;
            if(num === 1){
                res = await SMSDCRiskPartitionDeptList(param);
            }else{
                res = await SMSDCRiskPartitionUserList(param);
            }
            if(res.success) {
                listData.value = res.data;
                originalInfo = JSON.stringify(res.data);
            }
        }
        
        /*** documentClick 选择部门/选择人员 */
        const documentClick = (val:any, num: number) => {
            num === 1 ? val.presentStatus = 'dep' : val.presentStatus = 'pro';
            repairFunInfo.value = JSON.stringify(val);
            isFunDialog.value = true;
        }

        /*** cancelFunClick 部门/人员取消事件 */
        const cancelFunClick = () => {
            isFunDialog.value = false;
        }

        /*** controlFunClick 部门/人员提交事件 */
        const controlFunClick = () => {
            isFunDialog.value = false;
        }
        
        /*** cancelDrawClick 绘制区域取消事件 */
        const cancelDrawClick = () => {
            drawVisible.value = false;
        }

        /*** controlDrawClick 绘制区域提交事件 */
        const controlDrawClick = () => {
            drawVisible.value = false;
        }

        /*** drawHandle 查看/绘制区域点击事件 */
        const drawHandle = (val: any, num: number) => {
            drawInfo.value = JSON.stringify(val);
            drawVisible.value = true;
        }

        onMounted(() => {});

        return {
            ...getTableData(SMSDCRiskPartitionPage,{},searchObj),
            isUseDialog,
            cancelUseClick,
            controlUseClick,
            nodeClick,
            repairInfo,
            deleteHandle,
            resetClick,
            searchClick,
            aModel,
            planOption,
            planChange,
            planVal,

            searchOptions: [{
                value: '1',
                label: '培训计划'
            },{
                value: '2',
                label: '考题类型'
            }], // 搜索方式
            searchVal,
            searchChange,
            transferVal,
            acquireChange,
            projectNam,
            responsiblePle: [
                {label: '单选' , value: 0},
                {label: '多选' , value: 1},
                {label: '判断' , value: 2},
            ],
            documentClick,
            isFunDialog,
            cancelFunClick,
            controlFunClick,
            repairFunInfo,
            viewClick,
            listData,
            filterSearch,
            Search: Search,
            handleEnter,
            handleInputChange,
            drawVisible,
            cancelDrawClick,
            controlDrawClick,
            drawHandle,
            drawInfo,
        }
    },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
    #risk-management-control {
        ul {
            list-style: none;
            li {
                cursor: pointer;
                border-bottom: 1px solid rgba(255,255,255,0.1);
                text-align: center;
                padding: 10px 0;
            }
        }
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        .upload-demo{
            margin-left: 12px;
            margin-top: 2px;
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
</style>